<!DOCTYPE html>
<html lang="zh">
<head>
    <title>配置</title>
    {include file="public/header" /}
    <style>
        .ivu-btn-dashed {
            color: #495060;
            background-color: transparent;
            border-color: #dddee1;
            border-style: dashed;
        }
        .ivu-btn {
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            line-height: 1.5;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 6px 15px;
            font-size: 12px;
            border-radius: 4px;
            -webkit-transition: color .2s linear,background-color .2s linear,border .2s linear,-webkit-box-shadow .2s linear;
            transition: color .2s linear,background-color .2s linear,border .2s linear,-webkit-box-shadow .2s linear;
            transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
            transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear;
            color: #495060;
            background-color: #f7f7f7;
            border-color: #dddee1;
        }
        .text-center {
            text-align:center
        }
        td{
            padding:5px 10px;
        }
    </style>
</head>
<body>
    <div class="row" >
        <div class="col-lg-12">
            <div class="card">  
                <div class="card-body">
                    <form>

                        <table style="width:100%;">
                            <tr>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="income">用户收入</label>
                                        <select class="form-control col-md-2" id="income" name="income">
                                            <option value="0" selected>无</option>
                                            {volist name = 'income' id = 'item' key='k'}
                                                <option value="{$k}">{$item}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="isincome">是否必选</label>
                                        <select class="form-control col-md-2" id="isincome" name="isincome">
                                            <option value="0" selected>否</option>
                                            <option value="1">是</option>
                                            
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="accumulation">公积金</label>
                                        <select class="form-control col-md-4" id="accumulation" name="accumulation">
                                            <option value="0" >请选择</option>
                                            {volist name = 'accumulation' id = 'item' key='k'}
                                                <option value="{$k}">{$item}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="isaccumulation">是否必选</label>
                                        <select class="form-control col-md-2" id="isaccumulation" name="isaccumulation">
                                            <option value="0" selected>否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="room">是否有房</label>
                                        <select class="form-control col-md-4" id="room" name="room">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="isroom">是否必选</label>
                                        <select class="form-control col-md-2" id="isroom" name="isroom">
                                            <option value="0" selected>否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="vehicle">是否有车</label>
                                        <select class="form-control col-md-4" id="vehicle" name="vehicle">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="isvehicle">是否必选</label>
                                        <select class="form-control col-md-2" id="isvehicle" name="isvehicle">
                                            <option value="0" selected>否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="policy">是否有保单</label>
                                        <select class="form-control col-md-4" id="policy" name="policy">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-md-4">
                                        <label for="ispolicy">是否必选</label>
                                        <select class="form-control col-md-2" id="ispolicy" name="ispolicy">
                                            <option value="0" selected>否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        

                        



                        

                        

                        <div class="form-group col-md-4">
                            <label>配置</label>
                            <button type="button" class="ivu-btn ivu-btn-dashed" style="margin-left:50px;" onclick="add()">
                                <i class="mdi mdi-plus"></i>
                                <span>添加新规则</span>
                            </button>
                            

                            <!--  -->
                            <table class="table" id="tableShow" style="display:none">
                                <thead>
                                    <tr>
                                        <th class="text-center">期限</th>
                                        <th class="text-center">利率</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="periods">
                                    
                                </tbody>
                                
                                
                            </table>
                            <!--  -->
                                
                        </div>
                        <button type="button" onclick="save()" class="ivu-btn" style="width:100%;background:#2d8cf0;color:#FFF"> <span>提交</span></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    


{include file="public/footer"/}
<script type="text/javascript">
   
    // console.log(data);

    (function() {

        //设置data
        var data = '<?=json_encode($loanattr) ?>';
        var data = eval("(" + data + ")");
        init(data);
        
    })()
    function init(data) 
    {
        if (data.term.length>0) {
            $("#tableShow").attr("style","");
        }
        data.term.forEach((item,index)=>{
            var html = `<tr class='term'><td><input type='number' autocomplete="off" name='term[]' class='form-control' value='`+item+`'></td><td><input type='text' autocomplete="off" name='interest[]' class='form-control' value='`+data.interest[index]+`'></td><td><button id="btn_delete" type="button" class="btn btn-danger" style="margin:0 auto;display:block" onclick="del($(this))"><span class="mdi mdi-window-close" aria-hidden="true"></span>删除</button></td></tr>`;
            $("#periods").append(html);
        })
    }

    function add() 
    {
        var index = $(".term").size();
        if(index == 0) {
            $(".table").attr("style","");
        }
        var html = `<tr class='term'><td><input type='number' autocomplete="off" name='term[]' class='form-control'></td><td><input type='text' autocomplete="off" name='interest[]' class='form-control'></td><td><button id="btn_delete" type="button" class="btn btn-danger" style="margin:0 auto;display:block" onclick="del($(this))"><span class="mdi mdi-window-close" aria-hidden="true"></span>删除</button></td></tr>`;
        $("#periods").append(html);
        
    }

    function del(event)
    {
        if($(".term").size() == 1) {
            $(".table").attr("style","display:none");
        }
        event.parent().parent().remove();
    }

    function save(){
        var term = [];
        $("input[name^='term']").each(function(){
            term.push($(this).val())
        });

        var interest = [];
        $("input[name^='interest']").each(function(){
            interest.push($(this).val())
        });
       
        var data = {
            income:$("#income").val(),
            accumulation:$("#accumulation").val(),
            term:term,
            interest:interest,
            loan_id:"{$id}",
            isincome:$("#isincome").val(),
            isaccumulation:$("#isaccumulation").val(),
            room:$("#room").val(),
            isroom:$("#isroom").val(),
            vehicle:$("#vehicle").val(),
            isvehicle:$("#isvehicle").val(),
            policy:$("#policy").val(),
            ispolicy:$("#policy").val()
        }
        $.ajax({
            url:"/admin/product.product/attrsave",
            type:"post",
            data:data,
            success:function (res) {

                parent.lightyear.notify('操作成功', 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center')
                setTimeout(function () {parent.location.reload()},1000)
            },
            error:function (error) {
                parent.lightyear.notify('删除失败', 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center')
                
            }
        })
    }



</script>
</body>
</html>

